import styled from 'styled-components'
import { Icon } from '@/components/Icon'
export const WrapStyle = styled.div`
	display: flex;
	padding-left: 106px;
	.line {
		position: relative;
	}
	.line input::placeholder {
		color: #616060;
	}
	.kd-menu-item {
		&:hover {
			.iconCls {
				background-position: -18px 0;
			}
		}
		&.kd-menu-active {
			.iconCls {
				background-position: -36px 0;
			}
			.kd-menu-icon-collapse {
				.iconCls {
					background-position: -36px 0;
				}
			}
		}
	}
	.kd-menu-selected {
		.iconCls {
			background-position: -18px 0;
		}
	}
`
export const StyledContainer = styled.div`
	@media screen and (min-width: 1366px) {
		width: 100%;
		min-width: 1348px;
	}

	@media screen and (max-width: 1365px) {
		width: 1024px;
		margin: 0 auto;
	}
`
export const ContainerBody = styled.div`
	display: flex;
	width: 100%;
	height: calc(100% - 54px);
	padding: 35px 0;
	border-top: none;
	&.hiddenMenu {
		padding: 0px 0px;
		.rightContainer {
			width: calc(100%);
		}
	}
`
export const RightContainer = styled.div`
	position: relative;
	min-width: calc(100% - 248px);
	max-width: calc(100% - 181px);
	height: 100%;
	padding-left: 30px;
	padding-right: 90px;
`
/* Icon相关 */
export const MenuItemIcon = styled(Icon)`
	background-position: 0 0;
	width: 24px;
	height: 24px;
	display: block;
`
export const ItemIcon = styled(Icon)`
	background-position: 0px -2148px;
	width: 116px;
	height: 16px;
	line-height: 16px;
`
export const HeaderIcon = styled(Icon)`
	position: relative;
	width: 24px;
	height: 24px;
	margin: 0 5px;
`
export const MsgIcon = styled(HeaderIcon)`
	background-position: 0px -110px;
	&:hover {
		background-position: -48px -110px;
	}
`
/*样式布局 */
export const StyledWrap = styled.div`
	// height: 54px;
	width: 100px;
	margin-left: 20px;
	* {
		box-sizing: border-box;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	li {
		color: #333;
		font-size: 15px;
		line-height: 50px;
		text-decoration: none;
	}
`
